import React, { useState, useEffect } from'react';
import { useParams, useNavigate } from'react-router-dom';
import { TravelOutline } from 'antd-mobile-icons'
import { 
    Button, 
    Card, 
    Tag, 
    Toast,
} from 'antd-mobile';
import {
    ArrowLeftOutlined, 
    LikeOutlined,      
    MessageOutlined,   
    BookOutlined, 
    StarOutlined,  
    EyeOutlined,       
    ClockCircleOutlined
} from '@ant-design/icons';
import './ArticleDetail.css';

// 模拟文章数据（保持不变）
const articleData = {
    id: 1,
    title: '春季养生：肝木旺盛时节的经络调理法',
    coverImg: 'https://picsum.photos/id/292/800/400',
    content: `
        <p>春季是万物复苏的季节，在中医理论中，春季对应五行中的"木"，与人体五脏中的"肝"相对应。《黄帝内经》有云："春三月，此谓发陈，天地俱生，万物以荣"，可见春季养生对全年健康至关重要。</p>
        
        <h3>一、春季养肝的重要性</h3>
        <p>肝主疏泄，负责调节人体气机运行；肝藏血，具有储存血液和调节血量的功能。春季肝木旺盛，若养护不当，易出现情绪波动、头晕头痛、眼睛干涩等不适。</p>
        
        <h3>二、春季经络调理方法</h3>
        <p><strong>1. 太冲穴按摩</strong>：位于足背第一、二跖骨结合部前方凹陷处，是肝经原穴。每天用拇指按揉3-5分钟，酸胀为宜，可疏肝解郁。</p>
        <p><strong>2. 敲胆经</strong>：胆经位于大腿外侧，从环跳穴至足少阳。双手握拳，沿大腿外侧来回敲打3-5分钟，可促进肝胆排毒，改善疲劳。</p>
        <p><strong>3. 艾草泡脚</strong>：取干艾草30g，加水煮沸后兑入温水，泡脚15-20分钟，水温以不烫为宜。可温通经络，祛湿散寒。</p>
        
        <h3>三、春季饮食调理</h3>
        <p>春季饮食宜"省酸增甘"，减少酸味食物（如醋、李子），增加甘味食物（如山药、大枣），以滋养脾土，防止肝木过旺克脾。推荐食疗方：</p>
        <p><strong>枸杞菊花茶</strong>：枸杞10g，菊花5g，开水冲泡饮用，可养肝明目。</p>
        <p><strong>菠菜猪肝汤</strong>：菠菜200g，猪肝100g，煮汤食用，可补肝血、明目。</p>
        
        <h3>四、春季情志调节</h3>
        <p>肝主情志，春季应保持心情舒畅，避免暴怒、抑郁。可通过以下方式调节：</p>
        <p>1. 晨起散步，呼吸新鲜空气，感受自然生机</p>
        <p>2. 练习八段锦中的"左右开弓似射雕"动作，疏肝理气</p>
        <p>3. 保证充足睡眠，夜卧早起，顺应自然规律</p>
        
        <p>春季养生应顺应阳气升发的特点，注重疏肝理气、调和气血，为全年健康打下基础。如有不适，建议咨询专业中医师辨证调理。</p>
    `,
  
    category: '四季养生',
    date: '2024-03-15',
    views: '2.3k',
    likes: 156,
    comments: 56,
    collected: false
};

// 相关推荐文章（保持不变）
const relatedArticles = [
    {
        id: 2,
        title: '久坐人群必看：3个穴位缓解肩颈僵硬',
        img: 'https://picsum.photos/id/177/200/140',
        views: '1.8k',
        date: '2024-03-10'
    },
    {
        id: 3,
        title: '艾灸的正确打开方式：不同体质对应不同灸法',
        img: 'https://picsum.photos/id/152/200/140',
        views: '3.1k',
        date: '2024-03-05'
    },
    {
        id: 4,
        title: '中医食疗：4款祛湿汤品，告别身体困重',
        img: 'https://picsum.photos/id/292/200/140',
        views: '2.5k',
        date: '2024-02-28'
    }
];

const ArticleDetail = () => {
    const { id } = useParams(); 
    const navigate = useNavigate();
    const [article, setArticle] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [isLiked, setIsLiked] = useState(false);
    const [isCollected, setIsCollected] = useState(false);
    const [likeCount, setLikeCount] = useState(0);

    // 模拟加载文章数据
    useEffect(() => {
        setTimeout(() => {
            setArticle(articleData);
            setIsLiked(articleData.likes > 0);
            setIsCollected(articleData.collected);
            setLikeCount(articleData.likes);
            setIsLoading(false);
        }, 800);
    }, [id]);

    // 处理点赞
    const handleLike = () => {
        setIsLiked(!isLiked);
        setLikeCount(prev => isLiked? prev - 1 : prev + 1);
        Toast.show(isLiked? '取消点赞' : '点赞成功');
    };

    // 处理收藏
    const handleCollect = () => {
        setIsCollected(!isCollected);
        Toast.show(isCollected? '取消收藏' : '收藏成功');
    };

    // 处理分享
    const handleShare = () => {
        Toast.show('分享功能已触发');
    };

    // 返回上一页
    const handleBack = () => {
        navigate(-1);
    };

    // 跳转到文章详情
    const goToArticle = (articleId) => {
        navigate(`/health/article/${articleId}`);
    };

    if (isLoading) {
        return (
            <div className="art-article-loading">
                <div className="art-loading-placeholder art-cover-placeholder"></div>
                <div className="art-loading-placeholder art-title-placeholder"></div>
                <div className="art-loading-placeholder art-meta-placeholder"></div>
                <div className="art-loading-placeholder art-content-placeholder"></div>
                <div className="art-loading-placeholder art-content-placeholder"></div>
                <div className="art-loading-placeholder art-content-placeholder"></div>
            </div>
        );
    }

    if (!article) {
        return (
            <div className="art-article-error">
                <p>文章加载失败，请稍后重试</p>
                <Button onClick={handleBack}>返回</Button>
            </div>
        );
    }

    return (
        <div className="art-article-detail-page">
            {/* 顶部导航 */}
            <header className="art-article-header">
                <div 
                    className="art-back-btn" 
                    onClick={handleBack}
                    size="large"
                >
                    <ArrowLeftOutlined />
                </div>
                <div className="art-article-actions">
                    <div 
                        className="art-action-btn"
                        onClick={handleShare}
                        size="large"
                    >
                        <BookOutlined />
                    </div>
                </div>
            </header>

            {/* 文章内容 */}
            <div className="art-article-content">
                <h1 className="art-article-title">{article.title}</h1>
                
                <div className="art-article-meta">
                    <Tag className="art-article-category">{article.category}</Tag>
                    <div className="art-meta-info">
                        <span className="art-meta-item">
                            <ClockCircleOutlined size="small" />
                            <span>{article.date}</span>
                        </span>
                        <span className="art-meta-item">
                            <EyeOutlined size="small" />
                            <span>{article.views} 阅读</span>
                        </span>
                    </div>
                </div>
                
                <div className="art-article-cover">
                    <img src={article.coverImg} alt={article.title} className="art-cover-img" />
                </div>
                
                <div 
                    className="art-article-body" 
                    dangerouslySetInnerHTML={{ __html: article.content }}
                />
                
                {/* 互动工具栏 - 移至文章内容底部，按需求布局 */}
                <div className="art-article-toolbar">
                    <div 
                        className={`art-toolbar-btn ${isLiked? 'active' : ''}`}
                        onClick={handleLike}
                    >
                        <div className="tool-icon">
                            <LikeOutlined />
                        </div>
                        <div className="tool-text">
                            <span className='tool-title'>点赞</span>
                            <span className="tool-count">{likeCount}</span>
                        </div>
                    </div>
                    
                    <div className="art-toolbar-btn">
                        <div className="tool-icon">
                            <MessageOutlined />
                        </div>
                        <div className="tool-text">
                            <span className='tool-title'>评论</span>
                            <span className="tool-count">{article.comments}</span>
                        </div>
                    </div>
                    
                    <div 
                        className={`art-toolbar-btn ${isCollected? 'active' : ''}`}
                        onClick={handleCollect}
                    >
                        <div className="tool-icon">
                            <StarOutlined />
                        </div>
                        <div className="tool-text">
                            <span className='tool-title'>{isCollected? '已收藏' : '收藏'}</span>
                        </div>
                    </div>
                    
                    <div className="art-toolbar-btn art-share-btn" onClick={handleShare}>
                        <div className="tool-icon">
                            <TravelOutline />
                        </div>
                        <div className="tool-text">
                            <span className='tool-title'>分享</span>
                        </div>
                    </div>
                </div>
            </div>
            
            {/* 相关推荐 */}
            <div className="art-related-articles">
                <h3 className="art-related-title">相关推荐</h3>
                <div className="art-related-list">
                    {relatedArticles.map(item => (
                        <Card 
                            key={item.id} 
                            className="art-related-article"
                            onClick={() => goToArticle(item.id)}
                        >
                            <div className="art-related-content">
                                <img src={item.img} alt={item.title} className="art-related-img" />
                                <div className="art-related-info">
                                    <h4 className="art-related-article-title">{item.title}</h4>
                                    <div className="art-related-meta">
                                        <span>
                                            <ClockCircleOutlined size="small" />
                                            {item.date}
                                        </span>
                                        <span>
                                            <EyeOutlined size="small" />
                                            {item.views}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default ArticleDetail;
    